<template>
	<view class="tabs">
		<view v-if="searchingStatus === 'default'">
			<scroll-view class="tab-bar" :scroll="false" :scroll-x="true" :show-scrollbar="false">
				<view class="uni-tab-item" v-for="(tab,index) in tabList" :key="index">
					<text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''"
						@click="current(index,tab.result)">{{tab.result}}</text>
				</view>
			</scroll-view>
		</view>
		<view class="tab-bar-line"></view>

		<view class="search">
			<!-- input 监听输入状态 confirm回车触发事件 -->
			<uni-search-bar v-model="keyword" @confirm="confirm" @cancel="cancel" placeholder="请输入搜索内容" />
		</view>

		<view class="tab-box" v-if="searchingStatus === 'default'">
			<newsPage :dataList="dataList" :userList="userList" class="page-item"></newsPage>
		</view>

		<view class="tab-box" v-else-if="searchingStatus === 'search' && dataList.total != 0">
			<newsPage :dataList="dataList" :userList="userList" class="page-item"></newsPage>	
		</view>
		
		<view v-else>暂无数据....</view>
		
	</view>
</template>

<script>
	import newsPage from './news-page.vue';
	export default {
		data() {
			return {
				tabList: [],
				tabIndex: 0,
				dataList: [],
				userList:[],
				channel: '头条',
				keyword: '',
				searchingStatus: 'default',
				pageNum: 1,
				pageSize: 30,
				
				user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
			}
		},
		components: {
			newsPage
		},
		onLoad() {
			this.__init()
			this.getList()
			
			this.getUser().then(res => {
				console.log(res)
				if(res){
					this.userList = res
				}else{
					this.userList = []
					// this.$message.error('请登录');
				}
					
			})
		},
		methods: {
			async getUser() {
				return (await this.request.get("/user/username/" + this.user.username)).data;
			},
			
			
			// 获取新闻频道接口
			__init() {
				this.request.get("/nav").then((res) => {
					if(res.code === "200"){
						console.log("数据", res)
						this.tabList = res.data
					}
				}).catch(() => {
					// 消息提示框
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})

			},
			// 获取新闻接口
			getList() {
				this.request.get("/channel/page",{
					params:{
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						channel: this.channel
					},
				}).then((res) => {
					if(res.code === "200"){
						console.log("数据2", res)
						this.dataList = res.data
					}
				}).catch(() => {
					// 消息提示框
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})

			},
			// 搜索新闻接口
			getSearch() {
				this.request.get("/channel/page",{
					params:{
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						title: this.keyword
					},
				}).then((res) => {
					if(res.code === "200"){
						console.log("数据3", res)
						this.dataList = res.data
						console.log("this.dataList",this.dataList)
					}
				}).catch(() => {
					// 消息提示框
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			current(index, name) {
				console.log(index)
				this.tabIndex = index

				this.channel = name
				this.getList()
			},
			confirm() {
				this.searchingStatus = 'search'
				this.getSearch()
			},
			cancel() {
				this.searchingStatus = 'default'
				this.getList()

			},
			
			// 页面到底提交
			onReachBottom() {
				if (this.loading == 0) {
					uni.showLoading({
						title: '数据加载中'
					});
				} else {
					uni.showToast({
						title: '数据加载到底了~~~',
						duration: 1000,
						icon: "error"
					});
					return
				}
				new Promise(resolve => {
					setTimeout(() => {
						this.currentPage++
						this.getNewsData()
						resolve()
					}, 1000)
				}).then(() => {
					uni.hideLoading()
				})
			}
		},
	}
</script>

<style>
	.tabs {

		background-color: #ffffff;
	}

	.tab-bar {
		display: flex;
		white-space: nowrap;

	}

	.tab-bar-line {
		height: 1px;
		background-color: #cccccc;
	}

	.tab-box {
		flex: 1;
	}

	.uni-tab-item {
		display: inline-block;
		padding-left: 20px;
		padding-right: 20px;

	}

	.uni-tab-item-title {
		color: #555;
		font-size: 15px;
		height: 40px;
		line-height: 40px;
	}

	.uni-tab-item-title-active {
		color: #007AFF;
		border-bottom: solid 1px #007AFF;
	}
</style>
